import { StatisticCard } from '@ant-design/pro-card';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { message } from 'antd';
import { useEffect, useState } from 'react';
import ExpiredDayCounts from '../components/ExpiredDayCounts';
import { getIotSimStatistic } from '../service';
import type { IotSimStatisticType } from '../typings.d';

const imgStyle = {
  display: 'block',
  width: 42,
  height: 42,
};
const queryRes: IotSimStatisticType = {
  global: {
    count: 0,
    expired: 0,
    expired10: 0,
    expired30: 0,
  },
  upiot: {
    count: 0,
    expired: 0,
    expired10: 0,
    expired30: 0,
  },
  tibiot: {
    count: 0,
    expired: 0,
    expired10: 0,
    expired30: 0,
  },
  dahan: {
    count: 0,
    expired: 0,
    expired10: 0,
    expired30: 0,
  },
};

const IotSimStatistic = () => {
  const [statisticInfo, setStatisticInfo] = useState<IotSimStatisticType>(queryRes);

  useEffect(() => {
    getIotSimStatistic().then((res) => {
      if (res?.success && res?.data) {
        setStatisticInfo(res.data);
      } else {
        message.error({ content: res?.message || '获取统计信息失败', key: 'iotStatis' });
      }
    });
  }, []);
  const { global, upiot, tibiot, dahan } = statisticInfo;
  return (
    <PageHeaderWrapper>
      <StatisticCard.Group title="流量卡统计">
        <StatisticCard
          statistic={{
            title: <h3>全部</h3>,
            value: global.count,
            suffix: '张',
            icon: <img style={imgStyle} src="/others/global.png" alt="icon" />,
          }}
          footer={<ExpiredDayCounts data={global} />}
        />
        <StatisticCard
          statistic={{
            title: <h3>量讯</h3>,
            value: upiot.count,
            suffix: '张',
            icon: <img style={imgStyle} src="/others/upiot.png" alt="icon" />,
          }}
          footer={<ExpiredDayCounts data={upiot} />}
        />
        <StatisticCard
          statistic={{
            title: <h3>齐犇</h3>,
            value: tibiot.count,
            suffix: '张',
            icon: <img style={imgStyle} src="/others/tibiot.png" alt="icon" />,
          }}
          footer={<ExpiredDayCounts data={tibiot} />}
        />
        <StatisticCard
          statistic={{
            title: <h3>大汉三通</h3>,
            value: dahan.count,
            suffix: '张',
            icon: <img style={imgStyle} src="/others/dahan.png" alt="icon" />,
          }}
          footer={<ExpiredDayCounts data={dahan} />}
        />
      </StatisticCard.Group>
    </PageHeaderWrapper>
  );
};

export default IotSimStatistic;
